/* 必填校验proName /新增其他属性/ */
import { defineComponent, computed, inject, reactive, watch, ref } from "vue";
import deepcopy from "deepcopy";

export default defineComponent({
  props: {
    modelValue: Object, // 确保类型匹配
    item: Object,
  },
  emits: ["update:modelValue", "changeItem"],
  setup(props, ctx) {
    const config = inject("configList");

    let state = reactive({
      editData: {},
    });
    let block = computed({
      get() {
        return props.item;
      },
    });
    const formRef = ref(null);

    const resetData = () => {
      if (!block.value) {
        state.editData = deepcopy(props.modelValue.value);
      } else {
        state.editData = deepcopy(block.value);
		state.editData["validata"] = [{
			required: true,
			message: "请输入验证规则",
			trigger: "blur",
		  }]
      }
      saveData();
    };
    const saveData = () => {
      if (!block.value) {
        props.modelValue.value.container = deepcopy(state.editData.container);
        // console.log(123,props.modelValue.value,456,state.editData);
      } else {
        if (!formRef) return;
        console.log(999, formRef);
        try {
			formRef.value.validate((valid) => {
            if (valid) {
              // console.log(333,state.editData);
              ctx.emit("changeItem", deepcopy(state.editData));
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        } catch (error) {
			console.log("error",error);
		}
      }
    };
    const reset = () => {
      if (!block.value) {
        console.log("start", deepcopy(props.modelValue.value));
        state.editData = deepcopy(props.modelValue.value);
      } else {
        state.editData = deepcopy(block.value);
		state.editData["validata"] = `[{
			required: true,
			message: "请输入验证规则",
			trigger: "blur",
		  }]`
        // console.log(111,state.editData);
      }
    };
    // 监听block变化
    watch(() => block.value, reset, { immediate: true });
    return () => {
      let tree = [];
      if (!block.value) {
        tree.push(
          <>
            <ElFormItem label="label布局">
              <ElSelect v-model={state.editData.container.labelPosition}>
                <ElOption label="左对齐" value="left"></ElOption>
                <ElOption label="顶部对齐" value="top"></ElOption>
              </ElSelect>
            </ElFormItem>
          </>
        );
      } else {
        tree.push(
          Object.entries(
            config.filter((item) => item.key == props.item.key)[0].props
          ).map(([propName, propValue]) => {
            return (
              //必填 才显示validate
              (state.editData.mustFill || propName != "validata") && (
                <ElFormItem
                  label={propValue.label}
                  prop={propName}
                  rules={propValue.valid}
                >
                  {{
                    input: () => (
                      <ElInput
                        type={propValue.types || "text"}
                        v-model={state.editData[propName]}
                        placeholder=""
                      ></ElInput>
                    ),
                    color: () => (
                      <ElColorPicker
                        v-model={state.editData[propName]}
                      ></ElColorPicker>
                    ),
                    select: () => (
                      <ElSelect v-model={state.editData[propName]}>
                        {propValue.options.map((optionItem) => {
                          return (
                            <ElOption
                              label={optionItem.label}
                              value={optionItem.value}
                            ></ElOption>
                          );
                        })}
                      </ElSelect>
                    ),
                  }[propValue.type]()}
                </ElFormItem>
              )
            );
          })
        );
      }
      return (
        <ElForm ref={formRef} model={state.editData} labelPosition="top">
          {tree}
          <ElButton onClick={saveData} type="primary">
            保存
          </ElButton>
          <ElButton onClick={resetData}>重置</ElButton>
        </ElForm>
      );
    };
  },
});
